<template>
  <view class="container">
    <!-- Header with search -->
    <view class="header">
      <view class="header-content">
        <view class="logo">
          <text class="logo-text">学习空间</text>
        </view>
        <view class="search-container">
          <view class="search-box">
            <view class="search-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </view>
            <input class="search-input" type="text" placeholder="搜索课程、标签或学校" v-model="searchTerm"
              @input="filterCourses" />
          </view>
          <view class="filter-button" @tap="showFilterOptions = true">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
            </svg>
          </view>
        </view>
      </view>
    </view>

    <!-- Banner for featured courses -->
    <view class="banner">
      <view class="banner-content">
        <view class="banner-title">
          <text class="title-text">精选课</text>
          <text class="subtitle-text">探索顶尖大学的热门课</text>
        </view>

        <scroll-view class="featured-courses" scroll-x="true" show-scrollbar="false">
          <view class="featured-courses-container">
            <view v-for="course in featuredCourses" :key="course.id" class="featured-course-card"
              @tap="navigateToCourse(course.id)">
              <view class="featured-image-container">
                <image :src="course.image" mode="aspectFill" class="featured-image" />
                <view class="level-badge">{{ course.level }}</view>
              </view>
              <view class="featured-content">
                <text class="featured-title">{{ course.title }}</text>
                <text class="featured-university">{{ course.university }}</text>
                <view class="featured-rating">
                  <view class="star-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="#FFB800"
                      stroke="#FFB800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <polygon
                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                      </polygon>
                    </svg>
                  </view>
                  <text class="rating-text">{{ course.rating }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- Category tabs -->
    <view class="categories">
      <scroll-view scroll-x="true" show-scrollbar="false" class="categories-scroll">
        <view class="categories-container">
          <view v-for="category in categories" :key="category.id"
            :class="['category-tab', activeCategory === category.id ? 'active-tab' : '']"
            @tap="setActiveCategory(category.id)">
            <text :class="['category-text', activeCategory === category.id ? 'active-text' : '']">
              {{ category.name }}
            </text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- Course grid - waterfall layout -->
    <view class="courses-grid">
      <view v-if="filteredCourses.length === 0" class="no-courses">
        <text class="no-courses-text">没有找到匹配的课</text>
        <view class="clear-filters" @tap="clearFilters">
          <text class="clear-filters-text">清除筛选条</text>
        </view>
      </view>

      <view v-else class="courses-container">
        <view v-for="course in filteredCourses" :key="course.id" class="course-card" @tap="navigateToCourse(course.id)">
          <view class="image-container">
            <image :src="course.image" mode="aspectFill" class="course-image" />
            <view class="level-badge">{{ course.level }}</view>
          </view>
          <view class="course-content">
            <text class="course-title">{{ course.title }}</text>
            <text class="course-university">{{ course.university }}</text>

            <view class="course-meta">
              <view class="rating">
                <view class="star-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="#FFB800"
                    stroke="#FFB800" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon
                      points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
                    </polygon>
                  </svg>
                </view>
                <text class="rating-value">{{ course.rating }}</text>
                <text class="review-count">({{ course.reviewCount }})</text>
              </view>

              <view class="duration">
                <view class="clock-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="10"></circle>
                    <polyline points="12 6 12 12 16 14"></polyline>
                  </svg>
                </view>
                <text class="duration-text">{{ course.duration }}</text>
              </view>
            </view>

            <view class="tags-container">
              <view v-for="(tag, index) in course.tags.slice(0, 2)" :key="index" class="tag">
                <text class="tag-text">{{ tag }}</text>
              </view>
              <text v-if="course.tags.length > 2" class="more-tags">+{{ course.tags.length - 2 }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// Mock data for courses
const courses = ref([
  {
    id: "1",
    title: "高级Web开发技术",
    university: "清华大学",
    instructor: "李明教授",
    rating: 4.8,
    reviewCount: 1254,
    tags: ["AI", "机器学习", "入门"],
    duration: "8",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/py.png",
    level: "初级",
    featured: true,
  },
  {
    id: "2",
    title: "Python数据分析与可视化",
    university: "北京大学",
    instructor: "张华博士",
    rating: 4.7,
    reviewCount: 986,
    tags: ["Python", "数据分析", "可视"],
    duration: "6",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/shuju.jpg",
    level: "中级",
  },
  {
    id: "3",
    title: "Web前端开发实",
    university: "复旦大学",
    instructor: "王强教授",
    rating: 4.9,
    reviewCount: 1542,
    tags: ["前端", "JavaScript", "React"],
    duration: "10周",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/web.png",
    level: "中级",
    featured: true,
  },
  {
    id: "4",
    title: "大数据处理与分析",
    university: "浙江大学",
    instructor: "陈明教授",
    rating: 4.6,
    reviewCount: 876,
    tags: ["大数", "Hadoop", "Spark"],
    duration: "8",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/daolun.png",
    level: "高级",
  },
  {
    id: "5",
    title: "移动应用开发入",
    university: "南京大学",
    instructor: "刘强教授",
    rating: 4.5,
    reviewCount: 765,
    tags: ["移动开", "Android", "iOS"],
    duration: "6",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/fengm.png",
    level: "初级",
  },
  {
    id: "6",
    title: "深度学习与计算机视觉",
    university: "上海交通大",
    instructor: "黄伟博士",
    rating: 4.9,
    reviewCount: 1324,
    tags: ["深度学习", "计算机视", "TensorFlow"],
    duration: "12",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/luoji.jpg",
    level: "高级",
    featured: true,
  },
  {
    id: "7",
    title: "云计算与分布式系",
    university: "武汉大学",
    instructor: "郑强教授",
    rating: 4.7,
    reviewCount: 892,
    tags: ["云计", "分布式系", "Docker"],
    duration: "8",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/jiegou.jpg",
    level: "中级",
  },
  {
    id: "8",
    title: "自然语言处理实战",
    university: "中国科学技术大",
    instructor: "赵明博士",
    rating: 4.8,
    reviewCount: 1056,
    tags: ["NLP", "BERT", "GPT"],
    duration: "10",
    image: "https://imagecgr.oss-cn-beijing.aliyuncs.com/web.png",
    level: "高级",
    featured: true,
  },
]);

// Categories for the tabs
const categories = ref([
  { id: "all", name: "全部" },
  { id: "ai", name: "人工智能" },
  { id: "programming", name: "编程开" },
  { id: "data", name: "数据科学" },
  { id: "design", name: "设计创意" },
  { id: "business", name: "商业管理" },
]);

const searchTerm = ref('');
const activeCategory = ref('all');
const showFilterOptions = ref(false);

// Computed properties
const featuredCourses = computed(() => {
  return courses.value.filter(course => course.featured);
});

const filteredCourses = computed(() => {
  let result = courses.value;

  if (searchTerm.value) {
    result = result.filter(
      (course) =>
        course.title.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
        course.tags.some((tag) => tag.toLowerCase().includes(searchTerm.value.toLowerCase())) ||
        course.university.toLowerCase().includes(searchTerm.value.toLowerCase()),
    );
  }

  if (activeCategory.value !== "all") {
    // This is a simplified filter. In a real app, you'd have proper category mapping
    result = result.filter((course) => {
      if (activeCategory.value === "ai" && course.tags.some((tag) => ["AI", "机器学习", "深度学习", "NLP"].includes(tag)))
        return true;
      if (
        activeCategory.value === "programming" &&
        course.tags.some((tag) => ["前端", "JavaScript", "Python", "移动开"].includes(tag))
      )
        return true;
      if (activeCategory.value === "data" && course.tags.some((tag) => ["数据分析", "大数", "可视"].includes(tag)))
        return true;
      return false;
    });
  }

  return result;
});

// Methods
const setActiveCategory = (categoryId) => {
  activeCategory.value = categoryId;
};

const filterCourses = () => {
  // The filtering is handled by the computed property
};

const clearFilters = () => {
  searchTerm.value = '';
  activeCategory.value = 'all';
};

const navigateToCourse = (courseId) => {
  uni.navigateTo({
    url: `/pages/index/index?id=${courseId}`
  });
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  /* Adjusted padding-bottom */
  /* padding-bottom: 100rpx; */
}

/* Header styles */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 20rpx 0;
}

.header-content {
  padding: 0 30rpx;
}

.logo {
  margin-bottom: 20rpx;
}

.logo-text {
  font-size: 36rpx;
  font-weight: 700;
  color: #1976D2;
  background: linear-gradient(90deg, #1976D2, #64B5F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f0f4f8;
  border-radius: 40rpx;
  padding: 12rpx 20rpx;
}

.search-icon {
  color: #94a3b8;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 60rpx;
  font-size: 28rpx;
  background-color: transparent;
  border: none;
}

.filter-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80rpx;
  height: 80rpx;
  background-color: #f0f4f8;
  border-radius: 50%;
  color: #64748b;
}

/* Banner styles */
.banner {
  background: linear-gradient(135deg, #1976D2, #42A5F5);
  padding: 30rpx 0;
  margin-bottom: 20rpx;
}

.banner-content {
  padding: 0 30rpx;
}

.banner-title {
  margin-bottom: 20rpx;
}

.title-text {
  font-size: 34rpx;
  font-weight: 700;
  color: #ffffff;
  display: block;
}

.subtitle-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 6rpx;
  display: block;
}

.featured-courses {
  width: 100%;
  white-space: nowrap;
}

.featured-courses-container {
  display: inline-flex;
  padding: 10rpx 0 20rpx;
}

.featured-course-card {
  width: 300rpx;
  margin-right: 20rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;
}

.featured-course-card:active {
  transform: scale(0.98);
}

.featured-image-container {
  position: relative;
  height: 160rpx;
}

.featured-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.level-badge {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background-color: #1976D2;
  color: white;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.featured-content {
  padding: 16rpx;
}

.featured-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.featured-university {
  font-size: 22rpx;
  color: #64748b;
  margin-top: 6rpx;
  display: block;
}

.featured-rating {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.star-icon {
  margin-right: 4rpx;
}

.rating-text {
  font-size: 22rpx;
  font-weight: 600;
  color: #1e293b;
}

/* Categories styles */
.categories {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 20rpx;
}

.categories-scroll {
  width: 100%;
  white-space: nowrap;
}

.categories-container {
  display: inline-flex;
  padding: 0 20rpx;
}

.category-tab {
  padding: 20rpx 30rpx;
  position: relative;
}

.category-text {
  font-size: 28rpx;
  color: #64748b;
}

.active-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #1976D2;
  border-radius: 2rpx;
}

.active-text {
  color: #1976D2;
  font-weight: 600;
}

/* Courses grid styles */
.courses-grid {
  flex: 1;
  padding: 20rpx 30rpx;
}

.no-courses {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
}

.no-courses-text {
  font-size: 28rpx;
  color: #64748b;
  margin-bottom: 20rpx;
}

.clear-filters {
  padding: 10rpx 20rpx;
}

.clear-filters-text {
  font-size: 26rpx;
  color: #1976D2;
}

.courses-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.course-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.course-card:active {
  transform: translateY(-4rpx);
}

.image-container {
  position: relative;
  height: 180rpx;
}

.course-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-content {
  padding: 16rpx;
}

.course-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #1e293b;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  height: 68rpx;
}

.course-university {
  font-size: 22rpx;
  color: #64748b;
  margin-top: 6rpx;
  display: block;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 12rpx;
}

.rating {
  display: flex;
  align-items: center;
}

.rating-value {
  font-size: 22rpx;
  font-weight: 600;
  color: #1e293b;
  margin-left: 4rpx;
}

.review-count {
  font-size: 20rpx;
  color: #94a3b8;
  margin-left: 4rpx;
}

.duration {
  display: flex;
  align-items: center;
  color: #64748b;
}

.clock-icon {
  margin-right: 4rpx;
}

.duration-text {
  font-size: 20rpx;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-top: 12rpx;
}

.tag {
  background-color: rgba(25, 118, 210, 0.1);
  border-radius: 20rpx;
  padding: 4rpx 12rpx;
}

.tag-text {
  font-size: 20rpx;
  color: #1976D2;
}

.more-tags {
  font-size: 20rpx;
  color: #94a3b8;
  margin-left: 6rpx;
}
</style>
